<template>
	<!-- 账本 -->
	<view class="bookPage">
		<n-loading></n-loading>
		<view v-if="memberInfo">
			<view class="titleTotal">
				<view class="titleItem">
					<view class="sum">￥<text>{{memberInfo.total_revenue}}</text></view>
					<view>累计收益</view>
				</view>
				<view class="titleItem">
					<view class="sum">￥<text>{{memberInfo.this_month_profit}}</text></view>
					<view>当月收益</view>
				</view>
				<view class="titleItem">
					<view class="sum">￥<text>{{memberInfo.today_profit}}</text></view>
					<view>今日收益</view>
				</view>
			</view>
			<view class="detailed">
				<view class="detaTitle">提现明细</view>
				<view class="detaTime">
					<view class="time" @tap="pickerTime">
						{{okTimeCh}}<u-icon name="arrow-down" size="24"></u-icon>
					</view>
					<view class="money">提现￥{{total}}</view>
				</view>
				<view v-if="accountBookReady">
					<view class="nodata" v-if="accountBook.length==0">
						<image src="../../static/svgIcon/noIntegral.svg" mode=""></image>
						<view class="tips">暂无提现记录~</view>
					</view>
					<view class="detaList" v-for="(item,index) of accountBook" :key="index" @tap="detailsGo(item.withdrawal_id)">
						<view class="listItem cashTime">
							<view>{{getdate(item.created_at,2)}}</view>
							<view :class="{orange:item.status==1}">{{item.status==1?'审核中':'已到账'}}</view>
						</view>
						<view class="listItem cashMoney">
							<view>提现</view>
							<view class="num">+{{item.money}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 时间选择器 -->
		<u-picker v-model="pickerTimeShow" mode="time" :params="timeParams" @confirm="okTime"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				memberInfo:null,
				total:null,
				accountBook:[],
				accountBookReady:null,
				isLoadMore:false,
				page: 1,
				pageSize: 20,
				okTimeVal:'',
				okTimeCh:'',
				pickerTimeShow:false,
				timeParams:{
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				}
			}
		},
		onLoad: function (option) {
			// 获取当月
			this.getCurrMouth();
			this.getMemberInfo();
			this.getAccountBook();
		},
		onPullDownRefresh() {
			this.accountBook = [];
			this.page = 1;
			this.getMemberInfo();
			this.getAccountBook();
			setTimeout(function () {
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			}, 2000);
		},
		// 滑动到底部
		onReachBottom() {
			if(!this.isLoadMore){
				this.getAccountBook()
			}
		},
		methods: {
			getCurrMouth(){
				var date = new Date();
				var y = date.getFullYear();
				var m = date.getMonth()+1;
				this.okTimeVal = y+'-'+(m<10?('0'+m):m);
				this.okTimeCh = y+'年'+(m<10?('0'+m):m+'月');
			},
			getMemberInfo(){
				this.apiget('/fun/member/view',{}).then(res =>{
					if(res.data.status == 200 ) {
						this.memberInfo = res.data.data;
					}
				})
			},
			getAccountBook(){
				this.apiget('/fun/member/account-book',{page:this.page,pageSize:this.pageSize,time:this.okTimeVal}).then(res =>{
					if(res.data.status == 200 ) {
						this.total = res.data.data.total;
						this.accountBook = this.accountBook.concat(res.data.data.list);
						this.accountBookReady = 1;
						if(res.data.data.list.length<this.pageSize){
							this.isLoadMore = true;
							this.status = 'nomore';
						}else if(res.data.data.list.length==this.pageSize && this.page == res.data.data.pageCount){
							this.isLoadMore = true;
							this.status = 'nomore';
						}else{
							this.status = 'loading';
							this.page = ++ this.page;
						}
					}
				})
			},
			pickerTime(){
				this.pickerTimeShow = true;
			},
			okTime(val){
				this.okTimeVal = val.year+'-'+val.month;
				this.okTimeCh = val.year+'年'+val.month+'月';
				this.accountBook = [];
				this.page = 1;
				this.getAccountBook()
			},
			// 详情
			detailsGo(id){
				uni.navigateTo({
					url: './withdrawalDetails?id='+id
				});
			},
		}
	}
</script>

<style lang="scss">
	.detailed {
		margin-top: 32rpx;
		background-color: #FFFFFF;
		height: 100%;
		
		.detaList {
			margin: 0 32rpx;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #EEEFF3;

			.listItem {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.cashTime {
				font-size: 24rpx;
				color: #666666;
				
				.orange{
					color: #FF5238;
				}
			}

			.cashMoney {
				margin-top: 10rpx;
				font-size: 28rpx;

				.num {
					color: #FF5238;
				}
			}
		}

		.detaTitle {
			padding: 24rpx 0;
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
		}

		.detaTime {
			padding: 20rpx 0;
			font-size: 24rpx;
			border-bottom: 1rpx solid #F5F5F5;

			.money {
				padding-left: 32rpx;
				margin-top: 10rpx;
				color: #666666;
			}

			.time {
				padding-left: 24rpx;
				margin: 8rpx 0;
				font-size: 32rpx;
				line-height: 32rpx;
				font-weight: 500;
				border-left: 8rpx solid #FF5238;

				.u-icon {
					margin-left: 10rpx;
				}
			}
		}
	}

	.titleTotal {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #666666;
		padding: 60rpx 0;
		box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.02);
		background-color: #FFFFFF;

		.titleItem:last-child {
			border: none;
		}

		.titleItem {
			flex: 1;
			text-align: center;
			border-right: 1rpx solid #EEEFF3;

			.sum {
				margin-bottom: 10rpx;
				color: #FF5238;

				text {
					font-size: 28rpx;
				}
			}
		}
	}

	.bookPage {
		background-color: #F8F8FA;
		// min-height: 100%;
	}
	
</style>
